<!--
  功能：系统监控
  作者：menghao.yan
  邮箱：yxs2615@163.com
  时间：2023年08月05日 09:25:37
-->
<template>
  <a-tabs v-model:activeKey="activeKey" type="card" class="y-tabs">
    <a-tab-pane :key="'kongzhiqi_'+ index" :tab="'控制器-'+index" v-for="index in 3">
      <div class="y-xiTongJianKong-panel">
        <!-- 利用a-row创建两行echart折线图容器div -->
        <a-row>
          <a-col :span="24">
            <div id="zhuJiZhuangTai-chart" class="echart-content"></div>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <div id="wangKaSuLv-chart" class="echart-content"></div>
          </a-col>
        </a-row>
      </div>
    </a-tab-pane>
  </a-tabs>
</template>

<script setup>
const activeKey = ref("kongzhiqi_1");

/**主机状态图表 */
const init_zhuJiZhuangTai_chart = () => {
  const myChart = echarts.init(document.getElementById("zhuJiZhuangTai-chart"));
  const option = {
    title: {
      text: "主机状态图表",
      textStyle: {
        align: "center",
        color: "#333333",
        fontSize: 18
      },
      top: "top",
      left: "center"
    },
    grid: {
      top: "20%",
      bottom: "10%",
      left: "10%",
      right: "12%"
    },
    tooltip: {
      trigger: "axis",
      label: {
        show: true
      }
    },
    legend: {
      align: "left",
      right: "right",
      top: "center",
      textStyle: {
        color: "#666",
        fontSize: 12
      }
    },
    xAxis: {
      boundaryGap: true,
      //默认，坐标轴留白策略
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false,
        alignWithLabel: true
      },
      data: [
        "01:00",
        "02:00",
        "03:00",
        "04:00",
        "05:00",
        "06:00",
        "07:00",
        "08:00",
        "09:00",
        "10:00",
        "11:00",
        "12:00"
      ]
    },
    yAxis: {
      name: "使用率",
      nameLocation: "center",
      nameTextStyle: {
        padding: [0, 0, 30, 0],
        color: "#333",
        fontSize: 14
      },
      max: 100,
      axisLabel: {
        formatter: " {value} %"
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "rgba(33,148,246,0.2)"
        }
      },
      axisTick: {
        show: false
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: "#eee"
        }
      }
    },
    series: [
      {
        name: "CPU使用率",
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 12,
        lineStyle: {
          color: "rgba(95, 87, 245, 1) ",
          shadowBlur: 12,
          shadowColor: "rgba(95, 87, 245, 0.9)",
          shadowOffsetX: 1,
          shadowOffsetY: 1
        },
        itemStyle: {
          color: "rgba(95, 87, 245, 1) ",
          borderWidth: 1,
          borderColor: "#FFF"
        },

        data: [20, 18, 28, 9, 16, 20, 30, 20, 13, 19, 40, 30]
      },
      {
        name: "内存使用率",
        type: "line",
        smooth: true,
        symbol: "triangle",
        symbolSize: 12,
        lineStyle: {
          color: "rgba(251,123,60,1) ",
          shadowBlur: 12,
          shadowColor: "rgba(251,123,60, 0.9)",
          shadowOffsetX: 1,
          shadowOffsetY: 1
        },
        itemStyle: {
          color: "rgba(251,123,60, 1) ",
          borderWidth: 1,
          borderColor: "#FFF"
        },

        data: [18, 28, 9, 16, 20, 30, 20, 13, 19, 40, 30, 10]
      }
    ]
  };
  myChart.setOption(option);
};
/**网卡流量图表 */
const init_wangKaSuLv_chart = () => {
  const myChart = echarts.init(document.getElementById("wangKaSuLv-chart"));
  const option = {
    title: {
      text: "网卡速率图表",
      textStyle: {
        align: "center",
        color: "#333333",
        fontSize: 18
      },
      top: "top",
      left: "center"
    },
    grid: {
      top: "10%",
      bottom: "10%",
      left: "10%",
      right: "12%"
    },
    tooltip: {
      trigger: "axis",
      label: {
        show: true
      }
    },
    legend: {
      align: "left",
      right: "right",
      top: "center",
      textStyle: {
        color: "#666",
        fontSize: 12
      }
    },
    xAxis: {
      boundaryGap: true,
      //默认，坐标轴留白策略
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false,
        alignWithLabel: true
      },
      data: [
        "01:00",
        "02:00",
        "03:00",
        "04:00",
        "05:00",
        "06:00",
        "07:00",
        "08:00",
        "09:00",
        "10:00",
        "11:00",
        "12:00"
      ]
    },
    yAxis: {
      name: "网卡速率",
      max: function(value) {
        return value.max + 20;
      },
      nameLocation: "middle",
      nameTextStyle: {
        padding: [0, 0, 30, 0],
        color: "#333",
        fontSize: 14
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        formatter: " {value} M"
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "rgba(33,148,246,0.2)"
        }
      },
      axisTick: {
        show: false
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: "#eee"
        }
      }
    },
    series: [
      {
        name: "enp5sofo RX",
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 12,
        lineStyle: {
          color: "rgba(95, 87, 245, 1) ",
          shadowBlur: 12,
          shadowColor: "rgba(95, 87, 245, 0.9)",
          shadowOffsetX: 1,
          shadowOffsetY: 1
        },
        itemStyle: {
          color: "rgba(95, 87, 245, 1) ",
          borderWidth: 1,
          borderColor: "#FFF"
        },

        data: [20, 18, 28, 9, 16, 20, 30, 20, 13, 19, 40, 30]
      },
      {
        name: "enp5sofo TX",
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 12,
        lineStyle: {
          color: "rgba(251,123,60,1) ",
          shadowBlur: 12,
          shadowColor: "rgba(251,123,60, 0.9)",
          shadowOffsetX: 1,
          shadowOffsetY: 1
        },
        itemStyle: {
          color: "rgba(251,123,60, 1) ",
          borderWidth: 1,
          borderColor: "#FFF"
        },

        data: [18, 28, 9, 16, 20, 30, 20, 13, 19, 40, 30, 10]
      },
      {
        name: "enp5sof1 RX",
        type: "line",
        smooth: true,
        symbol: "rect",
        symbolSize: 12,
        lineStyle: {
          color: "rgba(144, 238, 126,1) ",
          shadowBlur: 12,
          shadowColor: "rgba(144, 238, 126, 0.9)",
          shadowOffsetX: 1,
          shadowOffsetY: 1
        },
        itemStyle: {
          color: "rgba(144, 238, 126, 1) ",
          borderWidth: 1,
          borderColor: "#FFF"
        },

        data: [10, 20, 18, 9, 16, 30, 20, 19, 40, 30, 28, 13]
      },
      {
        name: "enp5sof1 TX",
        type: "line",
        smooth: true,
        symbol: "rect",
        symbolSize: 12,
        lineStyle: {
          color: "rgba(119, 152, 191,1) ",
          shadowBlur: 12,
          shadowColor: "rgba(119, 152, 191, 0.9)",
          shadowOffsetX: 1,
          shadowOffsetY: 1
        },
        itemStyle: {
          color: "rgba(119, 152, 191, 1) ",
          borderWidth: 1,
          borderColor: "#FFF"
        },

        data: [10, 20, 18, 9, 16, 30, 19, 40, 30, 28, 13, 20]
      },
      {
        name: "enp5sof2 RX",
        type: "line",
        smooth: true,
        symbol: "triangle",
        symbolSize: 12,
        lineStyle: {
          color: "rgba(170, 238, 238,1) ",
          shadowBlur: 12,
          shadowColor: "rgba(170, 238, 238, 0.9)",
          shadowOffsetX: 1,
          shadowOffsetY: 1
        },
        itemStyle: {
          color: "rgba(170, 238, 238, 1) ",
          borderWidth: 1,
          borderColor: "#FFF"
        },

        data: [10, 20, 18, 20, 19, 40, 30, 28, 13, 9, 16, 30]
      },
      {
        name: "enp5sof2 TX",
        type: "line",
        smooth: true,
        symbol: "triangle",
        symbolSize: 12,
        lineStyle: {
          color: "rgba(255, 0, 102,1) ",
          shadowBlur: 12,
          shadowColor: "rgba(255, 0, 102, 0.9)",
          shadowOffsetX: 1,
          shadowOffsetY: 1
        },
        itemStyle: {
          color: "rgba(255, 0, 102, 1) ",
          borderWidth: 1,
          borderColor: "#FFF"
        },

        data: [30, 19, 40, 30, 28, 13, 20, 10, 20, 18, 9, 16]
      },
      {
        name: "enp5sof3 RX",
        type: "line",
        smooth: true,
        symbol: "pin",
        symbolSize: 12,
        lineStyle: {
          color: "rgba(238, 170, 238,1) ",
          shadowBlur: 12,
          shadowColor: "rgba(238, 170, 238, 0.9)",
          shadowOffsetX: 1,
          shadowOffsetY: 1
        },
        itemStyle: {
          color: "rgba(238, 170, 238, 1) ",
          borderWidth: 1,
          borderColor: "#FFF"
        },

        data: [18, 20, 19, 40, 30, 28, 13, 10, 20, 9, 16, 30]
      },
      {
        name: "enp5sof3 TX",
        type: "line",
        smooth: true,
        symbol: "pin",
        symbolSize: 12,
        lineStyle: {
          color: "rgba(85, 191, 59,1) ",
          shadowBlur: 12,
          shadowColor: "rgba(85, 191, 59, 0.9)",
          shadowOffsetX: 1,
          shadowOffsetY: 1
        },
        itemStyle: {
          color: "rgba(85, 191, 59, 1) ",
          borderWidth: 1,
          borderColor: "#FFF"
        },

        data: [13, 20, 10, 20, 30, 19, 40, 30, 28, 18, 9, 16]
      }
    ]
  };
  myChart.setOption(option);
};

// 页面渲染完成后初始化主机状态图表
onMounted(() => {
  // 主机状态图表
  init_zhuJiZhuangTai_chart();
  // 网卡流量图表
  init_wangKaSuLv_chart();
});
</script>



<style scoped>
.echart-content {
  width: 100%;
  height: 330px;
}
.y-xiTongJianKong-panel {
  height: 100%;
  overflow: auto;
}
</style>